<template>
  <!-- 登录页面 -->
  <div>
    <Row class="container">
      <div class="login-img-box" >
        <img src="../../static/img/bg.jpg"   alt="" />
      </div>
      <i-col span="7" offset="14" class="login-box">
        <div class="login-title">
          <p>欢 &nbsp;迎 &nbsp;登 &nbsp;录</p>
        </div>
        <div class="login-container">
          <div class="form-box">
            <Form ref="formInline" :model="formDate" :rules="ruleInline">
              <FormItem prop="username">
                <i-input
                  type="text"
                  v-model="formDate.username"
                  clearable
                  size="large"
                  placeholder="手机号"
                >
                  <Icon type="android-person" slot="prepend" class="input-icons-size"></Icon>
                </i-input>
              </FormItem>
              <FormItem prop="password">
                <i-input
                  type="password"
                  v-model="formDate.password"
                  clearable
                  size="large"
                  placeholder="密码"
                >
                  <Icon type="android-lock" slot="prepend"></Icon>
                </i-input>
              </FormItem>
              <FormItem>
                <Button
                  type="error"
                  size="large"
                  @click="handleSubmit('formInline')"
                  long
                  >登录</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>

<script>
import store from "@/vuex/store";
import { mapMutations, mapActions } from "vuex";

// 电话号码
const tellValidate = (rule, value, callback) => {
  const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
  if (value === undefined || value === '') {
    callback(new Error('电话不能为空'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入正确的电话号码'))
  } else {
    callback()
  }
}

export default {
  name: "Login",
  data () {
    return {
      formDate: {
        username: "",
        password: ""
      },
      ruleInline: {
        username: [
          {validator:tellValidate, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码不能少于6位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(["SET_USER_LOGIN_INFO"]),
    ...mapActions(["login"]),
    handleSubmit(name) {
      const _this = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http.post("/login", this.formDate).then(res => {
            _this.$Message.success("登陆成功");
            this.login(res.data.data);
            _this.$router.push("/");
          }).catch(err => {
            this.$Message.error("请填写正确的用户名或密码");
          })
        }
      });
    }
  },
  store
};
</script>

<style scoped>
.container {
  height: 100%;
  background-color: #fff;
}
.login-img-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
}
.login-img-box > img {
  width: 100%;
  min-height: 753px;
  max-height: 662px;
}
.login-box {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.login-title{
  height: 50px;
  font-size: 27px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 5px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #e9eaec;
  text-shadow: 3px 3px 5px rgba(0,0,0,0.8);
}

.login-container {
  width: 80%;
  height: 220px;
  border: #f3f3f3 solid 1px;
  border-radius: 2.5px;
  box-shadow: 0 3px 3px rgba(0,0,0,0.4);
  background-color: rgba(255,255,255,0.6);
}
.login-header {
  height: 50px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 5px;
}
.form-box {
  width: 80%;
  margin: 30px auto;
}
.form-box>>>div.ivu-input-group-prepend {
  font-size: 17px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>
